<template>
  <div class="pos">
    <el-row>
      <el-col :span="7" class="pos-order" id="order-list">
        <el-tabs >
          <el-tab-pane label="点餐">
            <el-table
                    border
                    width="100%"
                    :data="tableData"
            >
              <el-table-column label="商品名称" prop="goodsName"></el-table-column>
              <el-table-column label="数量" prop="count"></el-table-column>
              <el-table-column label="金额" prop="price"></el-table-column>
              <el-table-column label="操作" fixed="right" width="100%">
                <template slot-scope="scope" >
                  <el-button size="small" type="text" @click="addOrderList(scope.row)">增加</el-button>
                  <el-button size="small" type="text" @click="deleteOrder(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="totalDiv">
              <span>数量：{{totalCount}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>金额：{{totalMoney}}</span>
            </div>
            <div class="btn-group">
              <el-button type="warning">挂单</el-button>
              <el-button type="danger" @click="deleteAll">删除</el-button>
              <el-button type="success" @click="checkOut">结账</el-button>
            </div>
          </el-tab-pane>

          <el-tab-pane label="挂单">
            挂单
          </el-tab-pane>

          <el-tab-pane label="外卖">
            外卖
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="17" class="pos-commodity"  >

        <div>
          <h4>常用商品</h4>
          <div>
            <ul class="list-ul">
              <li v-for="(item,index) in oftenList" :key="index" @click="addOrderList(item)">
                <span>{{item.goodsName}}</span>
                <span class="item-price">￥ {{item.price}}</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="goods-type">
          <el-tabs >
            <el-tab-pane label="汉堡">
              <ul class="cookList">
                <li v-for="goods in type0Goods" @click="addOrderList(goods)">
                  <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                  <span class="foodName">{{goods.goodsName}}</span>
                  <span class="foodPrice">￥{{goods.price}}元</span>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="小食">
              <ul class="cookList">
                <li v-for="goods in type1Goods" @click="addOrderList(goods)">
                  <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                  <span class="foodName">{{goods.goodsName}}</span>
                  <span class="foodPrice">￥{{goods.price}}元</span>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="饮料">
              <ul class="cookList">
                <li v-for="goods in type2Goods" @click="addOrderList(goods)">
                  <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                  <span class="foodName">{{goods.goodsName}}</span>
                  <span class="foodPrice">￥{{goods.price}}元</span>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="套餐">
              <ul class="cookList">
                <li v-for="goods in type3Goods" @click="addOrderList(goods)">
                  <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                  <span class="foodName">{{goods.goodsName}}</span>
                  <span class="foodPrice">￥{{goods.price}}元</span>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {getOftenGoodsData,getTypeData} from "../../utils/getData";

  export default {
  name: 'pos',
  data () {
    return {
      activeMenu:'',
      tableData:[],
      oftenList:[],
      type0Goods:[],
      type1Goods:[],
      type2Goods:[],
      type3Goods:[],
      totalMoney:0,
      totalCount:0,
    }
  },
  methods:{
    addOrderList(goods){
      // 商品是否已经存在订单的列表中
      let isHave= false
      for(let item of this.tableData){
        if(item.goodsId == goods.goodsId){
          isHave = true
        }
      }
      // 根据判断的值来编写业务逻辑
      if(isHave){
        let arr = this.tableData.filter( a => a.goodsId == goods.goodsId)
        arr[0].count++
      }else{
        let newGoods = {goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1}
        this.tableData.push(newGoods)
      }
      this.getAllMonry()

    },
    deleteOrder(item){
      this.tableData = this.tableData.filter( a => a.goodsId !== item.goodsId)
      this.getAllMonry()
    },
    checkOut(){
      if(this.totalCount !== 0){
        this.$message({
          message:`结账成功，本次订单数量：${this.totalCount}，本次订单总金额：${this.totalMoney}元 ！`,
          type:'success',
          onClose:()=>{
            this.tableData = []
            this.totalCount = 0
            this.totalMoney = 0
          }
        })
      }else{
        this.$message.error("不能空结，老板了解你急切的心情！")
      }
    },
    deleteAll(){
      this.tableData = []
      this.totalCount = 0
      this.totalMoney = 0
    },
    getAllMonry(){
      this.totalCount = 0
      this.totalMoney = 0
      if(this.tableData){
        this.tableData.forEach((item) =>{
          this.totalCount += item.count
          this.totalMoney = this.totalMoney + (item.count * item.price)
        })
      }
    }
  },
  created(){
    getOftenGoodsData().then(res=>{
      this.oftenList = res.data
    })
    getTypeData().then(res=>{
      this.type0Goods=res.data[0];
      this.type1Goods=res.data[1];
      this.type2Goods=res.data[2];
      this.type3Goods=res.data[3];
    })
  },
  mounted(){
    let orderHeight = document.body.clientHeight
    document.getElementById('order-list').style.height = orderHeight + 'px'
    window.onresize = () =>{
      let orderHeight = document.body.clientHeight
      document.getElementById('order-list').style.height = orderHeight + 'px'
    }
  },
  components:{
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .pos{
    overflow: hidden;
    height: 100%;
    &-order{
      padding: 10px;
      background-color: #f9fafc;
      border-right: 1px solid #c0ccda;
      .btn-group{
        text-align: center;
        margin-top: 20px;
      }
      .totalDiv{
        text-align: center;
        background-color: #fff;
        padding: 10px;
        border-bottom: 1px solid #c0ccda;
      }
    }
    &-commodity{
      padding: 10px;
      h4{
        margin: 0;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #D3DCE6;
        background-color: #F9FAFC;
        padding: 0 10px;
      }
      .item-price{
        color:#58B7FF ;
      }
      .list-ul{
        li{
          float: left;
          border: 1px solid #E5E9F2;
          padding: 10px;
          margin: 10px;
          background-color: #FFF;
        }
      }
      .goods-type{
        clear: both;
        padding: 10px;
      }

      .cookList li {
        list-style: none;
        width: 23%;
        border: 1px solid #E5E9F2;
        height: auot;
        overflow: hidden;
        background-color: #fff;
        padding: 2px;
        float: left;
        margin: 2px;
        .foodImg{
          width: 40%;
        }
        span{
          display: block;
          float:left;
        }
        .foodName{
          font-size: 18px;
          padding-left: 10px;
          color:brown;

        }
        .foodPrice{
          font-size: 16px;
          padding-left: 10px;
          padding-top:10px;
        }
      }
    }

  }
</style>
